<template>
  <div class="btn">
    <li class="item" @click="getCity">
      <button>
        <span>{{ city }}</span>
      </button>
    </li>
  </div>
</template>

<script>
export default {
  name: 'SiteSelectOption',
  props: ['city'],
  data () {
    return {}
  },
  methods: {
    getCity (e) {
      // 将点击元素的文本赋值给父父组件中显示城市的变量
      this.$parent.$parent.citySite = e.target.innerText
    }
  }
}
</script>

<style>
.btn{
  display: inline;
}
.regionList .item {
  float: left;
  width: 25%;
  line-height: 30px;
  text-align: center;
  margin-bottom: 10px;
  margin-left: -5px;
}
.regionList .item button {
  width: 90%;
  height: 30px;
}
</style>
